<%@ page import="java.util.Objects" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: jiangcuizhi
  Date: 2023/12/6
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<%
    List<String> errors = (List<String>) request.getAttribute("errors");
%>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${ctx}/public/layui/css/layui.css">
    <link rel="stylesheet" href="${ctx}/css/modifys.css">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">系统管理员</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="../reader/04readerFrame.jsp">图书馆首页</a></dd>
                    <dd><a href="../loginManager.html">图书管理员</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;" >
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    ${user.username}
                    <span class="layui-nav-more layui-nav-mored"></span></a>
                <dl class="layui-nav-child layui-anim layui-anim-upbit">
                    <dd id="updatePassword"><a href="javascript:;">修改密码</a></dd>
                </dl>
            </li>
            <span class="layui-nav-bar" style="left: 19.9999px; top: 55px; width: 154px; opacity: 1;"></span>
        </ul>
    </div>
    <div class="errors">
        <%
            if (Objects.nonNull(errors)) {
                for (String error : errors) {
        %>
        <div><%=error%>
        </div>
        <%
                }
            }
        %>
    </div>
    <form id="modal" action="${ctx}/modify" method="post" style="outline:none">
        <!-- 弹窗 -->
        <div id="modal-content">
            <p>修改密码 <span id="close">&times;</span></p>
            <ul class="box">
                <li class="li">
                    <label for="pwd" class="lable">旧密码:</label>

                    <input type="text" id="pwd" name="pwd">
                </li>
                <li class="li">
                    <label for="newpwd" class="lable">新密码:</label>
                    <input type="text" id="newpwd" name="newpwd">
                </li>
                <li class="li">
                    <label for="cpwd" class="lable">确认密码:</label>
                    <input type="text" id="cpwd" name="cpwd">
                </li>
                <li class="li btn">
                    <button type="submit" checked="checked">提交</button>
                </li>
            </ul>
        </div>
    </form>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav" lay-filter="test" style="margin-left: -20px">
                <li class="layui-nav-item lis"
                    style="width: 200px;background-color: #009688;margin-left: 0;margin-bottom: 0;"><a
                        href="${ctx}/admin/libraryBackgroundImg.jsp" target="content"><i
                        class="layui-icon layui-icon-windows" style="font-size: 16px; color: #1E9FFF;"> </i>首页</a>
                </li>
                <li class="layui-nav-item lis" style="width: 200px;margin-left: 0;margin-bottom: 0;"><a
                        href="${ctx}/adminSearch" target="content"><i class="layui-icon layui-icon-group"
                                                                      style="font-size: 16px; color: #1E9FFF;"></i>用户信息</a>
                </li>
                <li class="layui-nav-item lis" style="width: 200px;margin-left: 0;margin-bottom: 0;">
                    <a class="" href="${ctx}/BookSearch" target="content"><i class="layui-icon layui-icon-read"
                                                                             style="font-size: 16px; color: #1E9FFF;"></i>图书信息</a>
                </li>
                <li class="layui-nav-item lis" style="width: 200px;margin-left: 0;margin-bottom: 0;">
                    <a class="" href="${ctx}/bookBorrow" target="content"><i class="layui-icon layui-icon-read"
                                                                             style="font-size: 16px; color: #1E9FFF;"></i>借阅记录查询</a>
                </li>
                <li class="layui-nav-item lis" style="width: 200px;margin-left: 0;margin-bottom: 0;"><a
                        href="${ctx}/addUser" target="content"><i class="layui-icon layui-icon-chart-screen"
                                                                             style="font-size: 16px; color: #1E9FFF;"></i>添加用户</a>
                </li>
                <li class="layui-nav-item lis" style="width: 200px;margin-left: 0;margin-bottom: 0;"><a
                        href="${ctx}/addBook" target="content"><i class="layui-icon layui-icon-file-b"
                                                                             style="font-size: 16px; color: #1E9FFF;"> </i>添加图书</a>
                </li>
                <li class="layui-nav-item lis" id="back" style="width: 200px;margin-left: 0;margin-bottom: 0;"><a
                        href="${ctx}/admin/libraryBackgroundImg.jsp" target="content"><i
                        class="layui-icon layui-icon-windows" style="font-size: 16px; color: #1E9FFF;"> </i>退出</a>
                </li>
                <%--                <li class="layui-nav-item lis" style="width: 200px;margin-left: 0;margin-bottom: 0;"><i class="layui-icon layui-icon-windows" style="font-size: 16px; color: #1E9FFF;margin-left:25px;"> </i>退出</li>--%>
            </ul>
        </div>
    </div>
    <form class="modal" action="${ctx}/admin.jsp" method="post">
        <!-- 弹窗 -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <ul class="box">
                <li class="li btn">
                    <button type="submit" checked="checked">确认退出</button>
                </li>
            </ul>
        </div>
    </form>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="${ctx}/admin/libraryBackgroundImg.jsp" name="content" height="100%" width="100%" frameborder="0"
                scrolling="no"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © 图书管理系统
    </div>
</div>
</body>
<script src="${ctx}/public/layui/layui.js"></script>
<script>
    const lis = document.querySelectorAll('.lis')
    lis.forEach((ele, index) => {
        ele.addEventListener('click', function () {
            lis.forEach(ele => ele.style.backgroundColor = 'rgba(0,0,0,0)')
            lis[index].style.backgroundColor = '#009688'
        })
    })

    //点击修改密码弹出

    document.querySelector('.layui-nav-img').onclick = function () {
        document.querySelector('.layui-anim-upbit').style.display = "block";
    }
    // 点击按钮
    var button = document.getElementById("updatePassword");
    var modal = document.getElementById("modal")
    button.onclick = function () {
        modal.style.display = "block";
    };
    //提交按钮，弹出弹窗
    modal.addEventListener('submit',function (){

            alert("修改密码成功,将跳转到修改密码成功的页面！")
    })
    //   关闭按钮
    document.getElementById("close").onclick = function () {
        modal.style.display = "none";
    };
    //点击退出，弹出弹窗
    const back = document.getElementById("back");
    const modall = document.querySelector(".modal");
    back.addEventListener("click", function () {
        modall.style.display = "block";
    })
    const close = document.querySelector(".close");

    close.addEventListener("click", function () {
        modall.style.display = "none";
    });


</script>
<script src="${ctx}/public/layui/layui.js"></script>
</html>
